<template>
	<view class="page" :style="{ '--color': color }">
		<navBar :bgColor="color" :title="title" color="white"></navBar>

		<view class="thmeBg d-flex a-center white bold topBar">
			<view class="flex-1 p-right20 size36 ellipsis">昵称：{{ userInfo.nickname }}</view>
			<view class="iconfont icon-fukuanma size46 whtie" @click="handleAdd"></view>
		</view>
		<view class="head">
			<view class="card">
				<view class="d-flex">
					<view class="flex-1">
						<view class="size36 color_33 bold m-bot10">{{ commission.income }}</view>
						<view class="h6 color_99">可提现({{ nameDefinition.profitUnit }})</view>
					</view>
					<view class="flex-1">
						<view class="size36 color_33 bold m-bot10">{{
							commission.estimate_income
						}}</view>
						<view class="h6 color_99">未入账({{ nameDefinition.profitUnit }})</view>
					</view>
				</view>
				<view class="d-flex p-top40">
					<view class="flex-1">
						<view class="size36 color_33 bold m-bot10">{{
							commission.cumulative_income
						}}</view>
						<view class="h6 color_99">累计佣金({{ nameDefinition.profitTitle }})</view>
					</view>
					<view class="flex-1">
						<view class="size36 color_33 bold m-bot10">{{
							commission.lock_order_count
						}}</view>
						<view class="h6 color_99">累计完成(单)</view>
					</view>
					<view class="flex-1">
						<view class="size36 color_33 bold m-bot10">{{
							commission.lock_order_money
						}}</view>
						<view class="h6 color_99">累计业绩({{ nameDefinition.profitUnit }})</view>
					</view>
				</view>
				<view
					class="btn flexac thmeBg size28 white"
					@click="toUrl('/moneyPage/capital/withdraws')"
					>我要提现</view
				>
			</view>
		</view>
		<view class="card">
			<view class="d-flex f-wrap">
				<block v-for="(item, index) in menuData" :key="index">
					<view class="w-333 m-top20" @click="toLink(item)">
						<view class="icon">
							<view class="iconfont white" :class="item.icon"></view>
						</view>
						<view class="size26 color_66 m-top12">{{ item.name }}</view>
					</view>
				</block>
			</view>
		</view>
		<view class="card">
			<view class="d-flex">
				<view class="flex-1">
					<view class="size36 color_33 bold m-bot10">{{ commission.today_user }}</view>
					<view class="size28 color_66">今日新增会员</view>
				</view>
				<view class="flex-1">
					<view class="size36 color_33 bold m-bot10">{{
						commission.my_team_member
					}}</view>
					<view class="size28 color_66">累计会员</view>
				</view>
			</view>
			<view class="btn flexac thmeBg size28 white" @click="handleAdd">推广名片</view>
		</view>
	</view>
</template>

<script>
	import { mapState } from 'vuex';
	export default {
		data() {
			return {
				staticUrl: this.staticUrl,
				state: 0,
				fromShare: 0,
				title: '分销中心',
				commission: '',
				teamConfig: '',
				vipUpgrade: '',

				pageData: '',

				menuData: [
					{
						name: '我的会员',
						url: '/moneyPage/distributors/myFans',
						img: '/images/jh_up/icon-3001.png',
						icon: 'icon-weibiaoti2fuzhi12 size46',
					},
					{
						name: '分销订单',
						url: `/moneyPage/distributors/fenxiaoOrder?state=${this.state}`,
						img: '/images/jh_up/icon-3002.png',
						icon: 'icon-a-001 size50',
					},
					{
						name: `佣金明细`,
						url: `/moneyPage/capital/brokerage_list?state=${this.state}`,
						img: '/images/jh_up/icon-3003.png',
						icon: 'icon-a-016 size54',
					},
					{
						name: `推广名片`,
						url: `/privatePage/single/codeCard`,
						img: '/images/jh_up/icon-3004.png',
						icon: 'icon-a-wodekecheng_huaban1-01 size50',
					},
					{
						name: `提现说明`,
						url: `/moneyPage/distributors/inviteRule`,
						img: '/images/jh_up/icon-3005.png',
						icon: 'icon-a-003 size50',
					},
					{
						name: `银行卡管理`,
						url: `/moneyPage/capital/addBank`,
						img: '/images/jh_up/icon-3006.png',
						icon: 'icon-a-033 size50',
					},
				],
			};
		},

		onLoad(e) {
			this.getInfo();
		},
		methods: {
			getInfo() {
				this.$http
					.get({
						url: '/zzj_singleSaleApi/my_income',
						data: {
							openid: this.openid,
						},
					})
					.then((res) => {
						if (res.errcode != 100) return this.$Toast(res.msg);
						const result = res.data;
						this.commission = result;
						this.teamConfig = res.teamConfig;
						this.vipUpgrade = res.vipUpgrade;
					});
			},
			toLink(Item) {
				this.toUrl(Item.url);
			},
			handleAdd() {
				this.toUrl('/privatePage/single/codeCard');
			},
		},
		computed: {
			...mapState(['color', 'openid', 'userInfo', 'nameDefinition']),
			name() {
				return this.shop_type == 1 ? '陪玩达人' : '门店';
			},
		},
	};
</script>

<style lang="scss" scoped>
	.page {
		background-color: #f5f5f5;
	}
	.topBar {
		padding: 50rpx 30rpx;
	}
	.head {
		background: linear-gradient(var(--color), #f5f5f5);
	}
	.card {
		background: #fff;
		border-radius: 20rpx;
		box-shadow: 0 4rpx 24rpx 0 rgba(0, 0, 0, 0.06);
		padding: 24rpx 0 40rpx 0;
		margin: 0 20rpx 20rpx;
		text-align: center;
		.btn {
			width: 600rpx;
			height: 72rpx;
			border-radius: 36rpx;
			margin: 40rpx auto 0;
		}
		.icon {
			display: inline-block;
			width: 90rpx;
			height: 90rpx;
			line-height: 90rpx;
			background: var(--color);
			border-radius: 50%;
			.imgIcon {
				width: 40rpx;
				height: 40rpx;
			}
		}
	}
</style>
